<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05自定义JS对象</title>
</head>
<body>
<table border="1px">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //1.实例化一个自带属性与方法的对象
    let p1 = {
        name:'李四',
        age:18,
        eat:function(){
            console.log(this.name+'~~~'+this.age);
        }
    };
    console.log(p1);
    p1.eat();

    //2.先定义一个空对象，再动态的添加属性与方法
    let p2 = {};
    p2.name = '王五';
    p2.age = 30;
    p2.eat = function(){
        console.log(this.name+'~~~'+this.age);
    }
    console.log(p2);
    p2.eat();

    let productInfo = {
        title : 'Apple16 ProMax',
        price : 9999,
        color : '深空灰',
        size : '6.7寸',
        CPU : 'A16'
    }
    console.log(productInfo);

    let productArr = [
        {title:'华为Mate60',price:8000,num:200},
        {title:'小米14',price:5000,num:1000},
        {title:'苹果15',price:10000,num:800},
        {title:'OPOO Reno11',price:2999,num:10}
    ];
    console.log(productArr)
    console.log(productArr[0]);
    //获取当前页面的table元素
    let table = document.querySelector('table');
    //遍历上方的商品数组，拿到数组中的每一个商品对象
    for(let i = 0;i<productArr.length;i++){
        //每循环一次，需要创建tr与td元素
        let tr = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        //将当前遍历到的商品属性值依次赋值给对应的单元格
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        //将准备好的td装到tr中
        tr.append(titleTd,priceTd,numTd);
        //将准备好的tr装到table中
        table.append(tr);
    }
</script>
</body>
</html>